<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title></title>
<style>

</style>
<script src="../../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<img id="pic" v-bind:src="url" v-on:mouseover="enlarge()" v-on:mouseout="resume()">
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		url : 'images/flower.jpg'//图片URL
	},
	methods : {
		enlarge : function(){
			var pic = document.getElementById('pic');
			pic.style.width = pic.clientWidth * 1.2 + "px";
		},
		resume : function (){
			var pic = document.getElementById('pic');
			pic.style.width = pic.naturalWidth + "px";
		}
	}
})
</script>


</body>

</html>



